<template>
  <div class="app-container">
    <el-button size="small" color="#626aef" style="float: right">数据对比</el-button>
    <!-- <el-date-picker
      v-model="dataValue1"
      type="date"
      placeholder="请选择"
      style="float: right;"
    /> -->
    <el-checkbox-group v-model="checkList">
      <el-checkbox label="风电" value="0" />
      <el-checkbox label="水电" value="1" />
      <el-checkbox label="火电" value="2" />
      <el-checkbox label="新能源" value="3" />
    </el-checkbox-group>
    <el-row :gutter="15" class="rows">
      <el-col :span="12" class="col-item">
        <div id="chart1" class="chart-area"></div>
        <div id="chart2" class="chart-area"></div>
      </el-col>
      <el-col :span="12" class="col-item">
        <div id="chart3" class="chart-area"></div>
        <div id="chart4" class="chart-area"></div>
      </el-col>
    </el-row>

    <el-dialog v-model="dialogTableVisible" title="发电类型数据透视" width="800">
      <el-table :data="gridData">
        <el-table-column property="type" label="类型" width="150" />
        <el-table-column property="name" label="名称" width="200" />
        <el-table-column property="rank" label="占有量" />
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import VChart from '@visactor/vchart';

let vchart1: any = {};
let vchart2: any = {};
let vchart3: any = {};
let vchart4: any = {};
const dataValue1 = ref('');
const checkList = ref(['0', '1', '2', '3']);
const dialogTableVisible = ref(false);
const gridData = [
  {
    type: '火电',
    name: 'xxx1',
    rank: '15%',
  },
  {
    type: '风电',
    name: 'xxx',
    rank: '30%',
  },
  {
    type: '水电',
    name: 'xxx',
    rank: '25%',
  },
  {
    type: '新能源',
    name: 'xxx',
    rank: '30%',
  },
];

const initChart1 = () => {
  const goldenMedals = {
    2020: [
      { country: '煤电', value: 36 },
      { country: '火电', value: 32 },
      { country: '风电', value: 28 },
      { country: '光伏', value: 17 },
      { country: '太阳能', value: 16 },
      { country: '氢能源', value: 13 },
      { country: '其他1', value: 11 },
      { country: '其他2', value: 10 },
      { country: '其他3', value: 9 },
      { country: '其他4', value: 9 },
    ],
    2021: [
      { country: '火电', value: 48 },
      { country: '煤电', value: 36 },
      { country: '风电', value: 24 },
      { country: '其他4', value: 19 },
      { country: '氢能源', value: 16 },
      { country: '光伏', value: 14 },
      { country: '其他3', value: 13 },
      { country: '太阳能', value: 9 },
      { country: '其他2', value: 8 },
      { country: '其他1', value: 7 },
    ],
    2022: [
      { country: '煤电', value: 46 },
      { country: '火电', value: 39 },
      { country: '其他4', value: 29 },
      { country: '风电', value: 19 },
      { country: '其他3', value: 13 },
      { country: '氢能源', value: 11 },
      { country: '其他1', value: 11 },
      { country: '光伏', value: 8 },
      { country: '其他2', value: 8 },
      { country: 'Hungary', value: 8 },
    ],
    2023: [
      { country: '煤电', value: 46 },
      { country: '其他4', value: 27 },
      { country: '火电', value: 26 },
      { country: '风电', value: 19 },
      { country: '氢能源', value: 17 },
      { country: '太阳能', value: 12 },
      { country: '其他1', value: 10 },
      { country: '其他3', value: 9 },
      { country: '其他2', value: 8 },
      { country: '光伏', value: 8 },
    ],
    2024: [
      { country: '煤电', value: 39 },
      { country: '火电', value: 38 },
      { country: '太阳能', value: 27 },
      { country: '其他4', value: 22 },
      // { country: 'Russian Olympic Committee', value: 20 },
      { country: '光伏', value: 17 },
      // { country: 'Netherlands', value: 10 },
      { country: '其他1', value: 10 },
      { country: '氢能源', value: 10 },
      { country: '其他2', value: 10 },
    ],
  };

  const colors = {
    火电: '#d62728',
    煤电: '#1664FF',
    风电: '#B2CFFF',
    其他4: '#1AC6FF',
    光伏: '#94EFFF',
    太阳能: '#FF8A00',
    Cuba: '#FFCE7A',
    氢能源: '#3CC780',
    其他1: '#B9EDCD',
    其他2: '#7442D4',
    其他3: '#DDC5FA',
    'Russian Olympic Committee': '#B2CFFF',
    Netherlands: '#FFC400',
    Hungary: '#FAE878',
  };

  const dataSpecs = Object.keys(goldenMedals).map((year) => {
    return {
      data: [
        {
          id: 'id',
          values: goldenMedals[year]
            .sort((a, b) => b.value - a.value)
            .map((v) => {
              return { ...v, fill: colors[v.country] };
            }),
        },
        {
          id: 'year',
          values: [{ year }],
        },
      ],
    };
  });
  const duration = 1000;
  const exchangeDuration = 600;

  const spec = {
    type: 'bar',
    padding: {
      top: 12,
      right: 100,
      bottom: 12,
    },
    data: dataSpecs[0].data,
    direction: 'horizontal',
    yField: 'country',
    xField: 'value',
    seriesField: 'country',
    bar: {
      style: {
        fill: (datum) => datum.fill,
      },
    },
    axes: [
      {
        animation: true,
        orient: 'bottom',
        type: 'linear',
        visible: true,
        max: 50,
        grid: {
          visible: true,
        },
      },
      {
        animation: true,
        id: 'axis-left',
        orient: 'left',
        width: 130,
        tick: { visible: false },
        label: { visible: true },
        type: 'band',
      },
    ],
    title: {
      visible: true,
      text: '价格波动分析',
      padding: [5, 10],
    },
    animationUpdate: {
      bar: [
        {
          type: 'update',
          options: { excludeChannels: ['y'] },
          easing: 'linear',
          duration,
        },
        {
          channel: ['y'],
          easing: 'circInOut',
          duration: exchangeDuration,
        },
      ],
      axis: {
        duration: exchangeDuration,
        easing: 'circInOut',
      },
    },
    animationEnter: {
      bar: [
        {
          type: 'moveIn',
          duration: exchangeDuration,
          easing: 'circInOut',
          options: {
            direction: 'y',
            orient: 'negative',
          },
        },
      ],
    },
    animationExit: {
      bar: [
        {
          type: 'fadeOut',
          duration: exchangeDuration,
        },
      ],
    },
    customMark: [
      {
        type: 'text',
        dataId: 'year',
        style: {
          textBaseline: 'bottom',
          fontSize: 200,
          textAlign: 'right',
          fontFamily: 'PingFang SC',
          fontWeight: 600,
          text: (datum) => datum.year,
          x: (datum, ctx) => {
            return ctx.vchart.getChart().getCanvasRect()?.width - 50;
          },
          y: (datum, ctx) => {
            return ctx.vchart.getChart().getCanvasRect()?.height - 50;
          },
          fill: 'grey',
          fillOpacity: 0.5,
        },
      },
    ],
    player: {
      type: 'continuous',
      orient: 'bottom',
      auto: true,
      loop: true,
      dx: 80,
      position: 'middle',
      interval: duration,
      specs: dataSpecs,
      slider: {
        railStyle: {
          height: 6,
        },
      },
      controller: {
        visible: true,
        backward: {
          style: {
            size: 12,
          },
        },
        forward: {
          style: {
            size: 12,
          },
        },
        start: {
          order: 1,
          position: 'end',
        },
      },
    },
  };

  vchart1 = new VChart(spec, { dom: 'chart1' });
  vchart1.renderSync();
};

const initChart2 = () => {
  const spec = {
    type: 'line',
    data: {
      values: [
        { type: '2024-11', country: '煤电', value: 4229 },
        { type: '2024-11', country: '风电', value: 4376 },
        { type: '2024-11', country: '光伏', value: 3054 },
        { type: '2024-11', country: '其他', value: 2814 },
        { type: '2024-12', country: '煤电', value: 3932 },
        { type: '2024-12', country: '风电', value: 3987 },
        { type: '2024-12', country: '光伏', value: 5067 },
        { type: '2024-12', country: '其他', value: 13012 },
        { type: '2025-01', country: '煤电', value: 5221 },
        { type: '2025-01', country: '风电', value: 3574 },
        { type: '2025-01', country: '光伏', value: 7004 },
        { type: '2025-01', country: '其他', value: 11624 },
        { type: '2025-02', country: '煤电', value: 9256 },
        { type: '2025-02', country: '风电', value: 4376 },
        { type: '2025-02', country: '光伏', value: 9054 },
        { type: '2025-02', country: '其他', value: 8814 },
        { type: '2025-03', country: '煤电', value: 3308 },
        { type: '2025-03', country: '风电', value: 4572 },
        { type: '2025-03', country: '光伏', value: 12043 },
        { type: '2025-03', country: '其他', value: 12998 },
      ],
    },
    title: {
      visible: true,
      text: '数据分类筛选',
    },
    stack: false, // 是否对数据进行堆叠处理
    xField: 'type',
    yAxis: {
      name: '消纳率 %',
    },
    xAxis: {
      name: '储能配置',
    },
    yField: 'value',
    seriesField: 'country', // 系列分组字段，默认会用于颜色映射
    lineLabel: { visible: true },
    legends: [{ visible: true, position: 'middle', orient: 'bottom' }],
  };

  vchart2 = new VChart(spec, { dom: 'chart2' });
  vchart2.renderSync();
};

const initChart3 = () => {
  const spec = {
    type: 'bar',
    data: {
      values: [
        { type: '2024-11', country: '风电', value: 4229 },
        { type: '2024-11', country: '煤电', value: 4376 },
        { type: '2024-11', country: '火力', value: 3054 },
        { type: '2024-11', country: '光伏', value: 12814 },
        { type: '2024-12', country: '风电', value: 3932 },
        { type: '2024-12', country: '煤电', value: 3987 },
        { type: '2024-12', country: '火力', value: 5067 },
        { type: '2024-12', country: '光伏', value: 13012 },
        { type: '2025-01', country: '风电', value: 5221 },
        { type: '2025-01', country: '煤电', value: 3574 },
        { type: '2025-01', country: '火力', value: 7004 },
        { type: '2025-01', country: '光伏', value: 11624 },
        { type: '2025-02', country: '风电', value: 9256 },
        { type: '2025-02', country: '煤电', value: 4376 },
        { type: '2025-02', country: '火力', value: 9054 },
        { type: '2025-02', country: '光伏', value: 8814 },
        { type: '2025-03', country: '风电', value: 3308 },
        { type: '2025-03', country: '煤电', value: 4572 },
        { type: '2025-03', country: '火力', value: 12043 },
        { type: '2025-03', country: '光伏', value: 12998 },
      ],
    },
    title: {
      visible: true,
      text: '',
    },
    xField: ['type', 'country'],
    yField: 'value',
    seriesField: 'country',
    animationAppear: {
      duration: 1500,
      easing: 'linear',
    },
    legends: [{ visible: true, position: 'middle', orient: 'bottom' }],
    axes: [
      {
        orient: 'left',
        label: {
          formatMethod(val) {
            return `${(val * 100).toFixed(2)}%`;
          },
        },
      },
    ],
  };

  vchart3 = new VChart(spec, { dom: 'chart3' });
  vchart3.on('click', function (param) {
    console.log('ppp-', param);
    dialogTableVisible.value = true;
    //param参数包含的内容有：
    //param.name：X轴的值
    //param.data：Y轴的值
    //param.value：Y轴的值
    //param.type：点击事件均为click
    //param.seriesName：legend的名称
    //param.seriesIndex：系列序号（series中当前图形是第几个图形第几个）
    //param.dataIndex：数值序列（X轴上当前点是第几个点）
    //alert(param.seriesName);  //legend的名称
    // alert(param.name);  //X轴的值
    // alert(option.series[param.seriesIndex].barIds[param.dataIndex]); // 获取自定义的值
  });
  vchart3.renderSync();
};

const initChart4 = () => {
  const spec = {
    type: 'pie',
    data: [
      {
        id: 'id0',
        values: [
          { type: '成都', value: '46.60' },
          { type: '绵阳市', value: '27.72' },
          { type: '自贡市', value: '8.13' },
          { type: '攀枝花市', value: '5' },
          { type: '泸州市', value: '3.63' },
          { type: '德阳市', value: '2.83' },
          { type: '广元市', value: '2.59' },
          { type: '遂宁市', value: '3.5' },
        ],
      },
    ],
    outerRadius: 0.8,
    innerRadius: 0.5,
    padAngle: 0.6,
    valueField: 'value',
    categoryField: 'type',
    pie: {
      style: {
        cornerRadius: 10,
      },
      state: {
        hover: {
          outerRadius: 0.85,
          stroke: '#000',
          lineWidth: 1,
        },
        selected: {
          outerRadius: 0.85,
          stroke: '#000',
          lineWidth: 1,
        },
      },
    },
    title: {
      visible: true,
      text: '数据导出与分享',
    },
    legends: {
      visible: true,
      orient: 'left',
    },
    label: {
      visible: true,
    },
    tooltip: {
      mark: {
        content: [
          {
            key: (datum) => datum['type'],
            value: (datum) => datum['value'] + '%',
          },
        ],
      },
    },
  };

  vchart4 = new VChart(spec, { dom: 'chart4' });
  // spec 中 data 属性上的 id 字段
  // vchart.updateData('id0', [
  //   { type: '1', value: 200 },
  //   { type: '2', value: 200 },
  //   { type: '3', value: 100 }
  // ]);
  vchart4.renderSync();
};

const initChart5 = () => {
  let option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999',
        },
      },
    },
    // toolbox: {
    //   feature: {
    //     dataView: { show: true, readOnly: false },
    //     magicType: { show: true, type: ['line', 'bar'] },
    //     restore: { show: true },
    //     saveAsImage: { show: true }
    //   }
    // },
    legend: {
      data: ['火电', '风电', '新能源', '风电平均值', '水电平均值', '新能源平均值'],
    },
    xAxis: [
      {
        type: 'category',
        data: ['2024-11', '2024-12', '2025-01', '2025-02', '2025-03'],
        axisPointer: {
          type: 'shadow',
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        name: '发电数',
        min: 0,
        max: 250,
        interval: 50,
        axisLabel: {
          formatter: '{value} 千瓦时',
        },
      },
      // {
      //   type: 'value',
      //   name: 'Temperature',
      //   min: 0,
      //   max: 25,
      //   interval: 5,
      //   axisLabel: {
      //     formatter: '{value} °C'
      //   }
      // }
    ],
    series: [
      {
        name: '火电',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value) {
            return value + ' 千瓦时';
          },
        },
        data: [76.7, 135.6, 162.2, 32.6, 20.0],
      },
      {
        name: '风电',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value) {
            return value + ' 千瓦时';
          },
        },
        data: [70.7, 175.6, 182.2, 48.7, 18.8],
      },
      {
        name: '新能源',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value) {
            return value + ' 千瓦时';
          },
        },
        data: [75.7, 115.6, 152.2, 98.7, 38.8],
      },
      {
        name: '风电平均值',
        type: 'line',
        // yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value) {
            return value + ' 千瓦时';
          },
        },
        itemStyle: {
          normal: {
            lineStyle: {
              width: 2,
              type: 'dashed', //'dotted'点型虚线 'solid'实线 'dashed'线性虚线
            },
          },
        },
        data: [100, 100, 100, 100, 100],
      },
      {
        name: '水电平均值',
        type: 'line',
        // yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value) {
            return value + ' 千瓦时';
          },
        },
        itemStyle: {
          normal: {
            lineStyle: {
              width: 2,
              type: 'dashed', //'dotted'点型虚线 'solid'实线 'dashed'线性虚线
            },
          },
        },
        data: [90, 90, 90, 90, 90],
      },
      {
        name: '新能源平均值',
        type: 'line',
        // yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value) {
            return value + ' 千瓦时';
          },
        },
        itemStyle: {
          normal: {
            lineStyle: {
              width: 2,
              type: 'dashed', //'dotted'点型虚线 'solid'实线 'dashed'线性虚线
            },
          },
        },
        data: [120, 120, 120, 120, 120],
      },
    ],
  };
};

onMounted(() => {
  initChart1();
  initChart2();
  initChart3();
  initChart4();
});

onBeforeUnmount(() => {
  vchart1?.release();
  vchart2?.release();
  vchart3.off('click');
  vchart3?.release();
  vchart4?.release();
});
</script>

<style lang="scss" scoped>
.rows {
  width: 100%;
  height: 92vh;
}
.col-item {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.chart-area {
  width: 100%;
  height: 45%;
  margin-bottom: 15px;
}
</style>